<script>
function HidePart(item) { 
	document.getElementById(item).style.display = "none";
	}
function ShowPart(item) { 
	document.getElementById(item).style.display = "inline-block"; 
	
}
</script>
			<div id="than">	
           	 <img src="images/muiten.png" width="27" height="26"; style="float:left">
            	<div id="textxanhdam"> Tasks </div>	
			</div>
	
             <div id="gach"></div>                    	
             	<!-- Bắt Đầu Nội Dung-->   
			<div id="leftSidebar">
				<h2>New task lists</h2>           		
            		<div class="padding15"></div>
            		Filter by user
            		<div class="padding5"></div>
            		<select style="width:190px margin-left:10px;">
            			<option value="1">All users</option>
            			<option value="1">All users</option>
            			<option value="1">All users</option>
            			<option value="1">All users</option>
            		</select>
            		<div class="padding15"></div>
            		Active task lists
            		<div class="padding5"></div>
            		<div id="taskList">
            			<ul class="tasks">
            				<li><a href="#">Function design <span class="functionNo"></span></a> <span id="pill_76403">1</span></li>
            				<li><a href="#">Detail design <span class="functionNo"></span></a></li> 
            			</ul>            		
					</div>
			</div>
			<div id="rightSidebar">			
				<ul>
						<li>
							<div id="task1">Function design &nbsp<span class="delTask1" style="display:none"><a href="#">delete</a></span> &nbsp <span class="editTask1" style="display:none"><a href="#">edit</a></span></div>
							<ul>
								<li id="task2" class="taskRow">
									<div class="taskName">Test1</div>
									<div class="taskCreatedUser">created by sonbx</div>
									<div class="taskCreatedTime">at 4pm</div>
									<div class="taskControl">
										<span class="delTask2" style="display:none"><a href="#">delete</a></span> &nbsp 
										<span class="editTask2" style="display:none"><a href="#">edit</a></span>
									</div>
								</li>
								<li id="task3" class="taskRow">
									<div class="taskName">Test1</div>
									<div class="taskCreatedUser">created by sonbx</div>
									<div class="taskCreatedTime">at 4pm</div>
									<div class="taskControl">
										<span class="delTask2" style="display:none"><a href="#">delete</a></span> &nbsp 
										<span class="editTask2" style="display:none"><a href="#">edit</a></span>
									</div>
								</li>
								<!-- Completed tasks -->
								<li id="completedTask1" class="completedTaskRow" style="display:none">
									<div class="taskName">Test1</div>
									<div class="taskCreatedUser">created by sonbx</div>
									<div class="taskCreatedTime">at 4pm</div>
									<div class="taskControl">
										<span class="delTask2" style="display:none"><a href="#">delete</a></span> &nbsp 
										<span class="editTask2" style="display:none"><a href="#">edit</a></span>
									</div>
								</li>
									<div class="taskButton">
										<button type="button" >Add task</button>
										<button id="showTasks" type="button" onclick="ShowPart('completedTask1');HidePart('showTasks');ShowPart('hideTasks');" >Show completed tasks</button>
										<button id="hideTasks" type="button" onclick="HidePart('completedTask1');ShowPart('showTasks');HidePart('hideTasks');" style="display:none;">Hide completed tasks</button>
									</div>
								<li>
								</li>
							</ul>
						</li>
						<li>
							Detail design
						</li>
					</ul>					
                </div>
                <script>
                	$("#task1").mouseover(function(){
							$(this).find("span.delTask1").css("display", "inline");
							$(this).find("span.editTask1").css("display", "inline");
                    	});
                	$("#task1").mouseout(function(){
							$(this).find("span.delTask1").hide();
							$(this).find("span.editTask1").hide();
                    	})
                    	
                    $("#task2").mouseover(function(){
							$(this).find("span.delTask2").css("display", "inline");
							$(this).find("span.editTask2").css("display", "inline");
                    	});
                	$("#task2").mouseout(function(){
							$(this).find("span.delTask2").hide();
							$(this).find("span.editTask2").hide();
                    	})
                </script>
				<a href="#"><img src="images/logonho.png" width="145" height="48" border="0" style="float:right; margin-top:20px;"></a>
			</div>
             	<!-- Kết Thúc Nội Dung-->
                
    <!--Kết thúc Phần Thân Nội Dung-->
  